<template>
  <div>
    <p style="color: red;">必须保留最少一个待审批人，否则流程无法继续执行</p>
    <el-collapse v-model="taskApproverActive" v-if="showCurrentApproverList">
      <el-collapse-item v-for="(node, index) in taskApproverList" :title="'节点：' + node.taskName" :name="node.taskId" :key="index">
        <el-table v-loading="loading" :data="node.approvers" max-height="250" border size="mini">
          <el-table-column label="登录名" prop="loginName" align="center" min-width="150px" />
          <el-table-column label="用户名" prop="userName" align="center" min-width="150px" />
          <el-table-column label="公司名称" prop="companyName" align="center" min-width="300px" />
        </el-table>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { getProcessRunTaskAndApprover } from './api';
import TextDeleteButton from '@/components/Zmids/Buttons/TextDeleteButton.vue';
import {reduceTask} from "@/platform/wf/api/wf/instance.js";

export default {
  data() {
    return {
      // 遮罩层
      loading: true,
      //图片流
      imageContent: '',
      // 当前审批节点及审批人信息
      taskApproverList: [],
      // 展开的列表
      taskApproverActive: []
    };
  },
  props: {
    // 流程实例ID
    processInstanceId: {
      required: true,
      type: String
    },
    showCurrentApproverList: {
      required: false,
      type: Boolean,
      default: true
    }
  },
  watch: {
    processInstanceId(newVal, oldVal) {
      // 更新流程图，存在新的值且发生改变
      if (newVal) {
        console.log('newVal', newVal);
        console.log('oldVal', oldVal);
        if (newVal != oldVal) {
          this.doSelectAprroveList();
        }
      } else {
        this.loading = false;
        this.imageContent = '';
        this.taskApproverList = [];
        this.taskApproverActive = [];
      }
    }
  },
  created() {
    // 加载审批列表
    if (this.processInstanceId) {
      this.doSelectAprroveList();
    }
  },
  methods: {
    // 执行显示图片请求
    doSelectAprroveList: function () {
      this.loading = true;
      this.taskApproverList = [];
      this.taskApproverActive = [];
      //获取流程内容
      getProcessRunTaskAndApprover(this.processInstanceId).then((response2) => {
        response2.data.forEach((element) => {
          const node = {
            approvers: [],
            taskId: element.taskId,
            taskName: element.taskName
          };
          node.approvers.push(...element.approvers);
          node.approvers = node.approvers.map((item) => {
            return {
              ...item,
              taskId: element.taskId
            };
          });
          this.taskApproverList.push(node);
          this.taskApproverActive.push(element.taskId);
        });
        this.loading = false;
      });
    },
  }
};
</script>

<style lang="scss" scoped></style>
